<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档列表</title>
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/layer/skin/layer.css">
    <style type="text/css">
        .form-control {width: 220px;}
        .ttd {width: 250px;text-align: center;}
        .ttb {width: 80px;text-align: center;}
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <form action="/doc/lists" method="get">
                        <table style="width: 100%;padding: 0;border: none">
                            <tr>
                                <td class="ttd">
                                    <input type="text" name="keyword" placeholder="文档名称" class="input-sm form-control" value="{$param.keyword??''}">
                                </td>
                                <td class="ttb"><input type="submit" class="btn btn-sm btn-primary" value="搜索"></td>
                                <td>
                                    <a href="javascript:;" id="add" class="btn btn-sm btn-success">添加</a>
                                    <a href="javascript:;" data-action="delAll" class="btn btn-sm btn-info">批量删除</a>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="ibox-content">
                    <table id="treeTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/hplus/js/jquery.min.js?v={php}echo time(){/php}"></script>
<script type="text/javascript" src="/static/layer/layer.js?v={php}echo time(){/php}"></script>
<script type="text/javascript" src="/static/royui/royui.min.js?v={php}echo time(){/php}"></script>
<script>
    $(function () {
        let $data = JSON.parse('<?php echo json_encode($list); ?>');
        let r = new royui();
        r.treeTable({
            elem: '#treeTable',
            data: $data,
            //url: '/doc/lists',
            //method: 'post',
            //is_cache: false,
            count: {$count},
            total_page: true,
            checkbox: true,
            paging: true,
            pages: {$pages},
            show_pages: 5,
            cols: [
                {
                    title: '文档名称',
                    template: function ($item) {
                        return '<a href="/doc/edit?id=' + $item.id + '" class="royui-button-a">' + $item.name + '</a>'
                    }
                },
                {
                    field: 'count',
                    title: '文章数'
                },
                {
                    title: '是否公开',
                    template: function ($item) {
                        if ($item.is_open) {
                            return '是'
                        } else {
                            return '否'
                        }
                    }
                },
                {
                    field: 'ctime',
                    title: '创建时间',
                    title_style: 'cursor:pointer',
                    is_sort: true
                },
                {
                    field: 'mtime',
                    title: '修改时间',
                    title_style: 'cursor:pointer',
                    is_sort: true
                },
                {
                    title: '操作',
                    action: [{
                        matter: 'edit',
                        url: '/doc/edit',
                        method: 'self'
                    }, {matter: 'del', url: '/doc/del'}],
                    template: function ($item) {
                        return '<a href=\'{:config("app.params.website.www")}doc/info?id=' + $item.id + '\' class="royui-button-a" target="_blank">查看</a> &nbsp; '
                    },
                    site: 'front'
                }
            ]
        })
        let $open = null;
        $('#add').click(function () {
            $open = layer.open({
                type: 2,
                title: '创建文档',
                content: '/doc/add',
                area: ['600px', '700px'],
                closeBtn: 2,
                btn: ['确定', '取消'],
                yes: function ($index, $layero) {
                    let $body = $layero.find('iframe').contents().find('body');
                    let $param = decodeURIComponent($($body).find('form').serialize());
                    $param = $param.split('&');
                    let $params = {};
                    $($param).each(function ($n, $obj) {
                        $params[$obj.split('=')[0]] = $obj.split('=')[1];
                    });
                    if (!$params.name) {
                        layer.msg('文档名称不能为空', {icon: 5, time: 1000});
                        return false
                    }
                    if ($params.is_open == null) {
                        layer.msg('请选择文档是否公开', {icon: 5, time: 1000});
                        return false
                    }
                    if (parseInt($params.is_open) === 0 && $params.password === '') {
                        layer.msg('不公开文档密码不能为空', {icon: 5, time: 1000});
                        return false
                    }
                    $.ajax({
                        type: 'post', dataType: 'json', cache: false,
                        url: '/doc/add',
                        data: $params,
                        success: function ($data) {
                            if ($data.code === 200) {
                                layer.msg($data.message, {icon: 1, time: 1200}, function () {
                                    layer.close($open);
                                    window.location.reload();
                                });
                            } else {
                                layer.msg($data.message, {icon: 5});
                            }
                        }
                    })
                }
            })
        })
        $('body').on('click', 'a[data-action]', function () {
            let $action = $(this).data('action')
            let $ids = [];
            if ($action === 'delAll') {
                $('.royui_checkbox').each(function () {
                    if ($(this).is(':checked')) {
                        $ids.push($(this).val())
                    }
                });
            }
            operate($ids, $action)
        });

        function operate($ids, $type) {
            let $msg = '', $tip = '';
            if ($type === 'delAll') {
                $msg = '确实要删除吗？';
                $tip = '删除'
            }
            if ($ids.length === 0) {
                layer.msg('请选择要' + $tip + '的项');
                return false
            }
            layer.confirm($msg, {icon: 3}, function () {
                $.ajax({
                    type: 'post', cache: false, dataType: 'json',
                    url: '/doc/del',
                    data: {'ids': $ids, 'type': $type},
                    success: function (data) {
                        if (data.code === 200) {
                            layer.msg(data.message, {icon: 1, time: 1000}, function () {
                                location.reload();
                            });
                        } else {
                            layer.msg(data.message, {icon: 5})
                        }
                    }
                })
            })
        }
    });
</script>
</html>
